	<div class="row trainees-section">
		<div class="col-md-12">
			<div class="table-container trainees-container" data-rows-per-page="<?php echo TRAINEE_ROWS_PER_PAGE; ?>">
				<table class="table table-hover trainees-table">
					<thead>
						<tr>
							<th class="table-col image-col"></th>
							<th class="table-col">Name and Contact Details</th>
							<th class="table-col">Age</th>
							<th class="table-col">Nationality</th>
							<th class="table-col">Locality</th>
							<th class="table-col">District</th>
							<th class="table-col">Address</th>
							<th class="table-col"></th>
						</tr>
					</thead>
					<tbody data-bind="foreach: trainees">
						<tr data-bind="attr: { 'data-id' : Id }">
							<td class="table-col image-col">
								<img src="" alt="" class="img-rounded" data-bind="attr: { src: ImageSource, alt: FullName }" />
							</td>
							<td>
								<strong data-bind="text: FullName"></strong><br />
								<small class="text-muted" data-bind="text: PhoneNo"></small><br />
								<small class="text-muted" data-bind="text: MobileNo"></small><br />
								<a class="no-decoration-link" data-bind="attr: { href: MailTo }"><small class="text-info" data-bind="text: Email"></small></a>
							</td>
							<td>
								<small data-bind="text: Age"></small>
							</td>
							<td>
								<small data-bind="text: Nationality"></small>
							</td>
							<td>
								<small data-bind="text: Locality"></small>
							</td>
							<td>
								<small data-bind="text: District"></small>
							</td>
							<td data-bind="foreach: Addresses">
								<small data-bind="text: FullAddress"><small><br />
							</td>
							<td class="table-col">
								<!-- ko ifnot: WithAccount  -->
								<a href="#view-info" class="btn btn-default btn-sm trainee-row-button view-record-button" data-bind="click: $root.view"><span class="glyphicon glyphicon-user"></span> View</a><br />
								<!-- /ko -->

								<!-- ko if: WithAccount  -->
								<div class="btn-group trainee-item-options">
								  <button type="button" class="btn btn-default btn-sm trainee-row-button" data-bind="click: $root.view"><span class="glyphicon glyphicon-user"></span> View</button>
								  <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown">
								    <span class="caret"></span>
								    <span class="sr-only">Toggle Dropdown</span>
								  </button>
								  <ul class="dropdown-menu" role="menu">
								    <li><a href="#view-info" class="view-record-button" data-bind="click: $root.view"><span class="glyphicon glyphicon-info-sign"></span> Trainee Info</a></li>
								    <li><a href="#view-user-account" class="view-account-button" data-bind="click: $root.viewAccount"><span class="glyphicon glyphicon-user"></span> User Account</a></li>
								  </ul>
								</div><br />
								<!-- /ko -->

								<a href="#remove" class="btn btn-danger btn-sm trainee-row-button remove-record-button" data-bind="click: $root.remove"><span class="glyphicon glyphicon-remove"></span> Delete</a>
							</td>
						</tr>
					</tbody>
				</table>	
			</div>
			
			<a href="#add" class="btn btn-primary add-trainee-button" data-bind="click: add"><span class="glyphicon glyphicon-plus"></span> Add Trainee</a>

			<?php
				$pages = floor($count / TRAINEE_ROWS_PER_PAGE);

				if ($pages <= 0) $pages = 1;
			?>

			<div class="page-info-section pull-right">
				<?php
					if ($pages > 1) {
						?>
							<ul class="pager">
							  <li class="disabled"><a class="pagination-button move-first-button" href="#first" data-bind="click: moveFirst">&larr; First</a></li>
							  <li class="disabled"><a class="pagination-button move-previous-button" href="#previous" data-bind="click: movePrevious">Previous</a></li>
							  <li><a class="pagination-button move-next-button" href="#next" data-bind="click: moveNext">Next</a></li>
							  <li><a class="pagination-button move-last-button" href="#last" data-bind="click: moveLast">Last &rarr;</a></li>
							</ul>
						<?php
					}
				?>

				<small class="text-muted pull-right">Page <span class="page-number" data-bind="text: currentPage"></span> of <span class="page-count"><?php echo $pages; ?></span></small>	
			</div>
		</div>
	</div>